import { Outlet,useLocation,useAppData,matchRoutes,history, } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import React,{useEffect, useState} from 'react';
import HeaderRight from '@/components/HeaderRight'
import { Divider,Typography } from 'antd';
import useCurentRouteName from '@/hooks/useCurentRouteName'
const { Title} = Typography
interface TabPropsInterface {
  tab: string;
  key: string;
  closable?: boolean;
}
const Layout: React.FC = () => {
    const location = useLocation()
    const {clientRoutes} = useAppData()
    const [tabActiveKey,setTabActiveKey] = useState('/promotions/advertising')
    const matches = matchRoutes(clientRoutes,location.pathname)
    const routeName = useCurentRouteName()
    const [tabList, setTabList] = React.useState<TabPropsInterface[]>([
            { tab: '广告推广', key: '/promotions/advertising', closable: false },
        ])
    const onTableChage = (key:string)=>{
        console.log(key)
        history.push(key)
        setTabActiveKey(key)
    }
    const excludePath = ['/']
    useEffect(()=>{
        console.log("location.pathname-->",location.pathname)
        if(excludePath.includes(location.pathname))return
        if(!tabList.find(item=>item.key===location.pathname)){
            if(matches?.at(-1)){
                const name = (matches?.at(-1) as any).route.name
               setTabList([...tabList,{tab:name,key:location.pathname}])
            }
        }
        setTabActiveKey(location.pathname)
    },[location])
    return <div className='h-full md:h-[calc(100vh - 35px)] p-4 bg-[#F2F6FB] '>
        <div className='bg-white h-full  overflow-hidden rounded-lg'>
            <header className=' hidden  md:hidden px-10 py-4 justify-between  items-center'>
                <div><Title level={5}>{routeName}</Title></div>
                <HeaderRight />
            </header>
           {/* <div className='px-10'> <Divider className='m-0'/></div> */}
            <PageContainer  
                tabList={tabList}
                breadcrumb={{}}
                tabProps={{
                    type:'card',
                    hideAdd: true,
                    onEdit: (e, action) => {  
                        if(action === 'remove'){
                            const key = e
                            const index = tabList.findIndex(item => item.key === key);
                            const nextTabList = tabList.slice();
                            nextTabList.splice(index, 1);
                            setTabList(nextTabList);
                            if(key === tabActiveKey){
                                history.push(nextTabList[nextTabList.length-1].key)
                            }
                        }
                    },
                }}
                tabActiveKey={tabActiveKey}
                onTabChange={(key)=>onTableChage(key)}
                ghost header={{title:''}}><Outlet/></PageContainer>
        </div></div> ;
};

export default Layout;
